<template>
  <a-modal title="文献附件" :visible="props.isMolFile" :footer="null" @cancel="cancelClick">
    <video ref="videoEle" style="width: 90%;height: auto" :src="url" controls autoPlay v-show="props.isShow.isVideo"/>
    <audio ref="audioEle" style="width: 90%; height: 40px" :src="url" controls autoPlay v-show="props.isShow.isAudio"/>
  </a-modal>
</template>

<script lang="ts" setup>
// 父组件参数，分别对应地址，视频或者音频资源以及弹窗控制
import {onBeforeUnmount, onMounted, ref} from "vue";

const props = defineProps(['url', 'isShow', 'isMolFile']);
// 父组件传入的关闭事件
const emits = defineEmits(["close"]);
// 获取元素
const videoEle = ref<HTMLVideoElement | null>(null);
const audioEle = ref<HTMLVideoElement | null>(null);

// 暂停播放
const pauseEle = () => {
  if (videoEle.value) {
    videoEle.value.pause();
  }
  if (audioEle.value) {
    audioEle.value.pause();
  }
}
// 取消事件
const cancelClick = () => {
  emits("close");
  // 停止视频播放
  pauseEle();
}

// 组件卸载前
onBeforeUnmount(() => {
  pauseEle();
});

</script>